import { Button, ConfigProvider, Space, Dropdown } from "antd";
import { PropsWithChildren, useState } from "react";
import { IconPlus, IconAngleDown } from "@gitee/icons-react";
import "./App.css";
import React from "react";
import classNames from "classnames";
import { Provider as ThemeProvider } from "./theme";

const Variant: React.FC<
  PropsWithChildren<{
    title: string;
    highlight?: boolean;
  }>
> = ({ title, highlight = false, children }) => {
  return (
    <Space wrap className="mb-2">
      <h4
        className={classNames("inline-block min-w-[4em] ", {
          "text-gray-400": !highlight,
          "text-black": highlight,
        })}
      >
        {title}
      </h4>
      {children}
    </Space>
  );
};

const items = [
  {
    key: "1",
    label: "1st item",
  },
  {
    key: "2",
    label: "2nd item",
  },
  {
    key: "3",
    label: "3rd item",
  },
];

function App() {
  const [open, setOpen] = useState(false);
  return (
    <main>
      <section className="border-b pb-4 mt-4">
        <h2 className="text-3xl">Buttons 按钮</h2>
        <hr className="my-8" />
        <div className="flex flex-col">
          <ThemeProvider>
            <h3>按钮类型</h3>
            <>
              <Variant title="主要" highlight>
                <Button type="primary">Button</Button>
                <Button type="primary" disabled>
                  Button
                </Button>
                <Button type="primary" loading disabled>
                  Button
                </Button>
              </Variant>
              <Variant title="图文">
                <Button
                  type="primary"
                  icon={<IconPlus inline className="mr-2" />}
                >
                  Button
                </Button>
                <Button
                  type="primary"
                  icon={<IconPlus inline className="mr-2" />}
                  disabled
                >
                  Button
                </Button>
                <Button
                  type="primary"
                  icon={<IconPlus inline className="mr-2" />}
                  loading
                  disabled
                >
                  Button
                </Button>
              </Variant>
              <Variant title="图标">
                <Button type="primary" icon={<IconPlus inline />}></Button>
                <Button
                  type="primary"
                  icon={<IconPlus inline />}
                  disabled
                ></Button>
                <Button
                  type="primary"
                  icon={<IconPlus inline />}
                  disabled
                  loading
                ></Button>
              </Variant>
              <Variant title="危险">
                <Button type="primary" danger>
                  Button
                </Button>
                <Button type="primary" danger disabled>
                  Button
                </Button>
                <Button type="primary" danger loading disabled>
                  Button
                </Button>
              </Variant>
              <hr />
            </>
            <>
              <Variant title="次要" highlight>
                <Button type="default">Button</Button>
                <Button type="default" disabled>
                  Button
                </Button>
                <Button type="default" loading disabled>
                  Button
                </Button>
              </Variant>
              <Variant title="图文">
                <Button
                  type="default"
                  icon={<IconPlus inline className="mr-2" />}
                >
                  Button
                </Button>
                <Button
                  type="default"
                  icon={<IconPlus inline className="mr-2" />}
                  disabled
                >
                  Button
                </Button>
                <Button
                  type="default"
                  icon={<IconPlus inline className="mr-2" />}
                  loading
                  disabled
                >
                  Button
                </Button>
              </Variant>
              <Variant title="图标">
                <Button type="default" icon={<IconPlus inline />}></Button>
                <Button
                  type="default"
                  icon={<IconPlus inline />}
                  disabled
                ></Button>
                <Button
                  type="default"
                  icon={<IconPlus inline />}
                  disabled
                  loading
                ></Button>
              </Variant>
              <Variant title="危险">
                <Button type="default" danger>
                  Button
                </Button>
                <Button type="default" danger disabled>
                  Button
                </Button>
                <Button type="default" danger loading disabled>
                  Button
                </Button>
              </Variant>
              <hr />
            </>
            <>
              <Variant title="文本" highlight>
                <Button type="text">Button</Button>
                <Button type="text" disabled>
                  Button
                </Button>
                <Button type="text" loading disabled>
                  Button
                </Button>
              </Variant>
              <Variant title="文本">
                <Button type="text" icon={<IconPlus inline className="mr-2" />}>
                  Button
                </Button>
                <Button
                  type="text"
                  icon={<IconPlus inline className="mr-2" />}
                  disabled
                >
                  Button
                </Button>
                <Button
                  type="text"
                  icon={<IconPlus inline className="mr-2" />}
                  loading
                  disabled
                >
                  Button
                </Button>
              </Variant>
              <Variant title="图标">
                <Button type="text" icon={<IconPlus inline />}></Button>
                <Button
                  type="text"
                  icon={<IconPlus inline />}
                  disabled
                ></Button>
                <Button
                  type="text"
                  icon={<IconPlus inline />}
                  disabled
                  loading
                ></Button>
              </Variant>
              <Variant title="危险">
                <Button type="text" danger>
                  Button
                </Button>
                <Button type="text" danger disabled>
                  Button
                </Button>
                <Button type="text" danger loading disabled>
                  Button
                </Button>
              </Variant>
              <hr />
            </>
            <>
              <Variant title="链接" highlight>
                <Button type="link">Button</Button>
                <Button type="link" disabled>
                  Button
                </Button>
                <Button type="link" loading disabled>
                  Button
                </Button>
              </Variant>
              <Variant title="文本">
                <Button type="link" icon={<IconPlus inline className="mr-2" />}>
                  Button
                </Button>
                <Button
                  type="link"
                  icon={<IconPlus inline className="mr-2" />}
                  disabled
                >
                  Button
                </Button>
                <Button
                  type="link"
                  icon={<IconPlus inline className="mr-2" />}
                  loading
                  disabled
                >
                  Button
                </Button>
              </Variant>
              <Variant title="图标">
                <Button type="link" icon={<IconPlus inline />}></Button>
                <Button
                  type="link"
                  icon={<IconPlus inline />}
                  disabled
                ></Button>
                <Button
                  type="link"
                  icon={<IconPlus inline />}
                  disabled
                  loading
                ></Button>
              </Variant>
              <Variant title="危险">
                <Button type="link" danger>
                  Button
                </Button>
                <Button type="link" danger disabled>
                  Button
                </Button>
                <Button type="link" danger loading disabled>
                  Button
                </Button>
              </Variant>
              <hr />
            </>
            <>
              <h3>尺寸</h3>
              <Variant title="Large">
                <Button type="primary" size="large">
                  Button
                </Button>
                <Button
                  type="primary"
                  size="large"
                  icon={<IconPlus className="mr-2" inline />}
                >
                  Button
                </Button>
                <Button
                  type="default"
                  size="large"
                  icon={<IconPlus className="mr-2" inline />}
                >
                  Button
                </Button>
                <Button
                  type="default"
                  size="large"
                  icon={<IconPlus inline />}
                ></Button>
                <Button
                  type="default"
                  size="large"
                  icon={<IconPlus inline />}
                  loading
                  disabled
                ></Button>
              </Variant>
              <Variant title="Default">
                <Button type="primary" size="middle">
                  Button
                </Button>
                <Button
                  type="primary"
                  size="middle"
                  icon={<IconPlus className="mr-2" inline />}
                >
                  Button
                </Button>
                <Button
                  type="default"
                  size="middle"
                  icon={<IconPlus className="mr-2" inline />}
                >
                  Button
                </Button>
                <Button
                  type="default"
                  size="middle"
                  icon={<IconPlus inline />}
                ></Button>
                <Button
                  type="default"
                  size="middle"
                  icon={<IconPlus inline />}
                  loading
                  disabled
                ></Button>
              </Variant>
              <Variant title="Small">
                <Button type="primary" size="small">
                  Button
                </Button>
                <Button
                  type="primary"
                  size="small"
                  icon={<IconPlus className="mr-2" inline />}
                >
                  Button
                </Button>
                <Button
                  type="default"
                  size="small"
                  icon={<IconPlus className="mr-2" inline />}
                >
                  Button
                </Button>
                <Button
                  type="default"
                  size="small"
                  icon={<IconPlus inline />}
                ></Button>
                <Button
                  type="default"
                  size="small"
                  icon={<IconPlus inline />}
                  loading
                  disabled
                ></Button>
              </Variant>
              <hr />
            </>
            <h3>组合类型</h3>
            <Variant title="普通">
              <Dropdown.Button
                menu={{ items }}
                buttonsRender={([leftButton, rightButton]) => [
                  React.cloneElement(
                    leftButton as React.ReactElement<any, string>,
                    {
                      icon: <IconPlus className="mr-2" inline />,
                      type: "primary",
                    }
                  ),
                  rightButton,
                ]}
                icon={
                  <IconAngleDown
                    inline
                    style={{
                      transform: `rotate(${open ? -180 : 0}deg)`,
                      transition: "transform 0.2s",
                    }}
                  />
                }
                type="primary"
                open={open}
                onOpenChange={(open) => setOpen(open)}
              >
                Actions
              </Dropdown.Button>
              <Dropdown.Button
                menu={{ items }}
                buttonsRender={([leftButton, rightButton]) => [
                  React.cloneElement(
                    leftButton as React.ReactElement<any, string>,
                    { icon: <IconPlus className="mr-2" inline /> }
                  ),
                  rightButton,
                ]}
              >
                Actions
              </Dropdown.Button>
              <Dropdown.Button
                menu={{ items }}
                buttonsRender={([leftButton, rightButton]) => [
                  React.cloneElement(
                    leftButton as React.ReactElement<any, string>,
                    {
                      icon: <IconPlus className="mr-2" inline />,
                    }
                  ),
                  rightButton,
                ]}
                type="primary"
                size="small"
              >
                Actions
              </Dropdown.Button>
              <Dropdown.Button
                menu={{ items }}
                buttonsRender={([leftButton, rightButton]) => [
                  React.cloneElement(
                    leftButton as React.ReactElement<any, string>,
                    {
                      icon: <IconPlus className="mr-2" inline />,
                    }
                  ),
                  rightButton,
                ]}
                type="default"
                size="small"
              >
                Actions
              </Dropdown.Button>
            </Variant>
            <Variant title="禁用">
              <Dropdown.Button
                menu={{ items }}
                buttonsRender={([leftButton, rightButton]) => [
                  React.cloneElement(
                    leftButton as React.ReactElement<any, string>,
                    {
                      icon: <IconPlus className="mr-2" inline />,
                      type: "primary",
                    }
                  ),
                  rightButton,
                ]}
                type="primary"
                disabled
              >
                Actions
              </Dropdown.Button>
              <Dropdown.Button
                menu={{ items }}
                buttonsRender={([leftButton, rightButton]) => [
                  React.cloneElement(
                    leftButton as React.ReactElement<any, string>,
                    { icon: <IconPlus className="mr-2" inline /> }
                  ),
                  rightButton,
                ]}
                disabled
              >
                Actions
              </Dropdown.Button>
              <Dropdown.Button
                menu={{ items }}
                buttonsRender={([leftButton, rightButton]) => [
                  React.cloneElement(
                    leftButton as React.ReactElement<any, string>,
                    {
                      icon: <IconPlus className="mr-2" inline />,
                    }
                  ),
                  rightButton,
                ]}
                type="primary"
                size="small"
                disabled
              >
                Actions
              </Dropdown.Button>
              <Dropdown.Button
                menu={{ items }}
                buttonsRender={([leftButton, rightButton]) => [
                  React.cloneElement(
                    leftButton as React.ReactElement<any, string>,
                    {
                      icon: <IconPlus className="mr-2" inline />,
                    }
                  ),
                  rightButton,
                ]}
                type="primary"
                size="small"
                loading
                disabled
              >
                Actions
              </Dropdown.Button>
            </Variant>
          </ThemeProvider>
        </div>
      </section>
    </main>
  );
}

export default App;
